<template>
    <div class="dashboard-container">
      <!-- 筛选查询 -->
      <el-form :inline="true">
        <el-form-item label="名称">
          <el-input placeholder="请输入部门名称" v-model="params.name" clearable></el-input>
        </el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button type="primary" @click="handleAdd('create')">新增部门</el-button>
      </el-form>
  
      <!-- 数据 -->
      <el-table :data="list" v-loading="loading">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="部门名称"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column  label="操作" width="200px">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleAdd('update', row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div style="padding-top:30px; text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageIndex+1"
          background
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.pageCount"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
  
      <!-- 新增、编辑 -->
      <el-dialog :title="dialogType=='create'?'新增部门':'编辑部门'" :visible.sync="dialogVisible" width="800px">
        <el-form label-width="100px" :model="temp"  :rules="rules" ref="ruleForm">
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="temp.name" placeholder="请输入部门名称"></el-input>
          </el-form-item>
          <el-form-item label="成员" prop="userIds">
            <el-select multiple v-model="temp.userIds" placeholder="请选择部门成员" filterable style="width: 100%">
              <el-option
                v-for="item in userList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="text-align: right;">
          <el-button @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        </div>
      </el-dialog>
  
    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import { userGetlist } from '@/api/user'
  import { groupGetDepartmentList, groupCreateDepartmentList, groupDeleteDepartmentList, groupUpdateDepartmentList } from '@/api/group'
  import moment from 'moment';
  import md5 from 'js-md5'
  
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        list: [],
        params: {
          pageIndex: 0,
          pageCount: 10,
          name: ''
        },
        total: 0,
        loading: false,
        dialogType: 'create',
        dialogVisible: false,
        userList: [],
        temp: {},
        rules: {
          name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }]
        }
        
      }
    },
    mounted(){
      //用户列表
      this.getList();
    },
    methods:{
        //获取用户列表
        async getUserList(){
            let data = await userGetlist({ pageCount: 999 });
            this.userList = data.data.list.map(item=>{
                return { label: item.nickName+'|'+item.phone, value: item.id }
            })
        },
      //点击删除部门
      handleDelete(id){
  
      },
      //提交表单
      submitForm(formName){
        this.$refs[formName].validate(async (valid) => {
            if (valid) {
              let temp;
              temp = Object.assign({}, this.temp)
              if(this.dialogType=='create'){
                await groupCreateDepartmentList(temp)
              }else{
                await groupUpdateDepartmentList(temp)
              }
              this.dialogVisible = false;
              this.getList();
            } else {
              console.log('error submit!!');
              return false;
            }
          });
      },
      //点击添加
      handleAdd(type, row){
        this.getUserList();
        this.dialogType = type;
        this.dialogVisible = true;
        if(type=='create'){
          this.temp = {
            name: '',
            userIds: []
          }
        }else{
          row.dataId = row.id
          this.temp = Object.assign({}, row)
        }
      },
      //获取数据列表
      async getList(){
        this.loading = true;
        let data = await groupGetDepartmentList(this.params) 
        this.loading = false;
        this.list = data.data.list.map(item=>{
          item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
          item.time = item.noHarassQuotaExpireTime==0?'':moment(item.noHarassQuotaExpireTime).format('YYYY-MM-DD')
          return item
        })
        this.total = data.data.totalCount;
      },
      //切换数量
      handleSizeChange(val){
        this.params.pageIndex = 0;
        this.params.pageCount = val;
        this.getList();
      },
      //切换页码
      handleCurrentChange(val){
        this.params.pageIndex = val-1;
        this.getList();
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  </style>
  